前情提要:
昨天做了todos的小練習,本來預計今天要回憶過去的,但昨天做完練習後覺得,集合所有概念做出來的東西,就是一種複習。所以我們把回憶留到最後再來大回顧吧!今天直接來看看Redux~
根據Redux官網說明
Redux is a predictable state container for JavaScript apps.
Redux是一個可預測狀態(state)的容器。嗯...什麼?
聽說Redux是基於flex設計的。這...所以我要先去看flux補充先備知識嗎?
太難、太複雜、太崩潰了!
不用擔心,有資源解救像我這樣的迷途羔羊,接下來的內容會依循Valentino Gagliardi寫的React Redux Tutorial for Beginners: The Definitive Guide (2018)指南進行學習。
剛剛上面提到,redux説「Redux是一個可預測狀態(state)的容器」。所以,什麼是state?
我們剛從react接到這,相信大家不陌生,一個有狀態的元件(stateful React component
),就是Javascript ES6 class。
import React, { Component } from 'react';
class Example extends Component {
constructor(props) {
super(props);
this.state = { // <= state
name: 'Yvonne'
}
}
render() {
return (
<div>
Hello, {this.state.name}
</div>
);
}
}
在React的component中,state保存資料,component可能會將這些資料渲染到頁面給使用者。
但state這詞並不只存在於react裡,state就在我們的周邊!
即使是最簡單的javascript應用程序都有state。
試想一個情境,當我按下一個button後,一個小視窗跳出。
即使是這種瑣碎的互動都有state存在其中。
在初始化的state我們可能會把它設定成一個javascript object。
var state = {
buttonClicked: 'no',
modalOpen: 'no'
}
然後當user按下按鈕後
var state = {
buttonClicked: 'yes',
modalOpen: 'yes'
}
除了把state存在object內之外,我們要怎麼在javascript追蹤這些內容?
有什麼函式庫(library)可以幫助我們追蹤這些state嗎?
剛剛講到了state其實無所不在,那你可以想像在一個React應用程序裡有多少個state嗎?
只要這個應用程序一直維持小小的,或許我們可以把state儲存在父層元件中。
但事實是...
即使是一個跟我們昨天做的todosㄧ樣渣的小練習,一但開始上下傳遞state,都可能變成無法管理。
Redux解決的問題,一開始可能還不太明確,但它有助於為每個React component提供所需的確切狀態(state)。
state不再散落在各個class component,而是透過Redux幫忙集中管理於某處。
Redux與框架無關,畢竟它是狀態(state)管理。學一次,到處用(Vue, Angluar)也會用到狀態管理。
Redux可能消失嗎?或許會
但它的模式(pattern)是永存的,我們應該學習管理UI的pattern因為這些對我們職涯上是無價的。
要用Redux、Flux或Mobx都隨便你。
用這些library也是有成本的,他們增加了另一層抽象層(layer of abstraction)。
但可以把它當成投資而不是成本。
要怎麼知道什麼時候可以開始用redux呢?
考慮使用redux的情境為:
如果你覺得這對你無感時不要擔心,Valentino Gagliardi也有同感,
Dan Abramov曾說過,Flux library就像眼鏡,當你需要它的時候你就知道了。
今日總結:
今天大致上紀錄了state是什麼?為什麼需要Redux?等入門心法(?!)
找了很多資料,但看完之後覺得最親民的還是Valentino Gagliardi的這篇。
它真的非常白話,也對我幫助很大,希望它也能幫助對於入門Redux感到迷惘的其他人。